<nav class="nav flex-column">
    <a href="#tab-layout" class="nav-link  @@if (context.tab_layout==='active' ) {active}" data-toggle="tab">
        <span data-toggle="tooltip" title="Browse Components" data-placement="right"><i data-feather="layout"></i></span>
    </a>
    <a href="#tab-grid" class="nav-link  @@if (context.tab_grid==='active' ) {active}" data-toggle="tab">
        <span data-toggle="tooltip" title="Grid System" data-placement="right"><i data-feather="grid"></i></span>
    </a>
    <a href="#tab-util" class="nav-link  @@if (context.tab_util==='active' ) {active}" data-toggle="tab">
        <span data-toggle="tooltip" title="Utilities" data-placement="right"><i data-feather="package"></i></span>
    </a>
    <a href="#tab-element" class="nav-link  @@if (context.tab_element==='active' ) {active}" data-toggle="tab">
        <span data-toggle="tooltip" title="UI Elements" data-placement="right"><i data-feather="layers"></i></span>
    </a>
    <a href="#tab-form" class="nav-link  @@if (context.tab_form==='active' ) {active}" data-toggle="tab">
        <span data-toggle="tooltip" title="Forms" data-placement="right"><i data-feather="inbox"></i></span>
    </a>
    <a href="#tab-chart" class="nav-link  @@if (context.tab_chart==='active' ) {active}" data-toggle="tab">
        <span data-toggle="tooltip" title="Charts" data-placement="right"><i data-feather="pie-chart"></i></span>
    </a>
</nav>